@import '../../../index.scss';

.container {
  padding-bottom: 1rpx;
  display: flex;
  flex-direction: column;
  height: 100vh;

  .navbar {

    // background-color: #fff;
    // position: fixed;
    // top: 0;
    // left: 0;
    // z-index: 99;
    background-color: #fff;
    border-bottom: 1px solid #f8f8f8;

    .capsule {
      // background-color: orange;
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;

      .back {
        position: absolute;
        height: 40rpx;
        left: 20rpx;
        padding: 10rpx;
        // background-color: rgba($color: #000000, $alpha: .1);
        width: 40rpx;
        border-radius: 100%;
        // filter: invert(100%);
      }

      .title {
        width: 100%;
        display: flex;
        justify-content: center;

        .item {
          font-size: 32rpx;
          margin: 0 24rpx;
          color: #999;

          &.active {
            color: #333;
            font-weight: bold;
          }
        }
      }
    }
  }

  .swiper {
    width: 100%;
    height: 0;
    flex: 1;

    .swiper-item {
      padding: 20rpx;
      height: 100%;
      box-sizing: border-box;

      .search {
        display: flex;
        align-items: center;
        padding: 14rpx 20rpx;
        background-color: #eee;
        border-radius: 14rpx;

        image {
          height: 28rpx;
          margin-right: 14rpx;
          opacity: .6;
        }

        input {
          flex: 1;
          font-size: 28rpx;
        }
      }

      .tip {
        padding: 30rpx 0 10rpx;
        font-size: 24rpx;
        color: #666;
      }

      .list {

        .item {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1px solid #f8f8f8;
          height: 96rpx;

          .avatar {
            height: 96rpx;
            width: 96rpx;
            overflow: hidden;
            border-radius: 100%;
            margin-right: 20rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .message {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: space-around;

            .name {
              font-size: 32rpx;
              font-weight: bold;
              color: #000;
            }

            .desc {
              font-size: 24rpx;
              color: #787878;
            }
          }

          .right {
            padding-right: 20rpx;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            height: 90%;


            .btn {
              background-color: #eee;
              font-size: 24rpx;
              padding: 10rpx 24rpx;
              border-radius: 8rpx;

            }
          }
        }
      }
    }
  }
}